import React,{createContext,useState,useEffect,useRef} from 'react';



const Context=createContext()

// const {Provider,Consumer}=createContext()// hook 形式
const Test = () => {// 名字必须大写
  const [num, addSum]=useState(0)
  const add=()=>{

    console.log('ref111111',test.current.value);
    addSum(num+1) 
    // addSum(num=>{
    //   num++
    // })
  }
  useEffect(()=>{//状态变化, 就会触发这个函数(Vue3的监听)
    console.log('生命周期加载');
  })
  // useEffect(()=>{//状态变化, 就会触发这个函数(Vue3的监听)
  //   console.log('生命周期加载');
  // },[num])
  let test=useRef()//ref 的使用

  return (
    
    <div>
      {/* <></> =>等价 fragment  (key可以加上)*/}
      <input type="text" ref={test} />
      <div>当前值{num}</div>
      <button onClick={add}>点击添加(函数式组件)</button>
      <Context.Provider  value={num}>
        <index2 />
      </Context.Provider>
    </div>
  );
}



const index2 = () => {
  return (
    <>
      <Consumer>
        {value=> <div> 传值{value.num}</div>}
      </Consumer>
    </>
  );
}

export default index2;
